<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>箭头函数</title>
</head>

<body>
    <pre>
    ★★★★★
    
    1、箭头函数
    
      ES6中新增的定义函数的方式

      const func = () => {}

      const func = function () {}

      函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
      如果形参只有一个，可以省略小括号

    2、 箭头函数注意事项

      a)、箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。
      箭头函数指向定义位置中 this 的指向

      b)、在箭头函数内部不能使用 arguments 来获取实参，使用 剩余参数 写法获取所有实参

      c)、箭头函数不是构造函数，所以不能实例化


  </pre>

    <script>
        // 之前写法
        // function Handle () {}
        // const handle = () => {}

        // 1.
        // let age = 20;
        // // var age = 20;
        // // window.age = 11;
        // // 箭头函数中的 this 指向所在的上下文（区间）的 this 指向
        // let obj = {
        //     age: 18,
        //     say: () => {
        //         // let age = 11;
        //         console.log(this);
        //         console.log(this.age);
        //     },
        // };

        // obj.say();

        // 2.
        // function Handle() {
        //     console.log(arguments); // Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
        // }

        // const Handle = () => {
        //     console.log(arguments); // 报错 arguments is not defined
        // };

        // Handle(1, 2, 3, 4);

        // 3.
        function handle() {
            console.log(this);
            return () => {
                console.log(this);
            };
        }
    </script>
</body>

</html>